<template>
  <div class="sale-funnel-card home-sale-card">
    <div class="sale-card-header">
      <span class="title">销售业绩</span>
      <div class="date-select">
        <el-select v-model="date" @change="handleChangeDate">
          <el-option v-for="d in dateTypes" :key="d.value" :value="d.value" :label="d.label" />
        </el-select>
      </div>
    </div>
    <div @click="gotoTarget">
      <saleGaugeChart ref="saleGaugeChart" />
    </div>

  </div>

</template>
<script>
import saleGaugeChart from './saleGaugeChart.vue'
import { getsalesPerformance } from '@/api/chart'
import { dateTypes } from '@/utils/enums'
import BigNumber from 'bignumber.js'
import { setParams } from '@/utils/jump'

export default {
  name: '',
  components: { saleGaugeChart },
  data() {
    return {
      dateTypes,
      date: 7
    }
  },
  mounted() {
    this.getData()
  },
  methods: {
    handleChangeDate(v) {
      this.getData()
    },
    gotoTarget() {
      // setParams({ dateType: this.date })
      this.gotoMainPage('report/target', { dateType: this.date })
    },
    getData() {
      // getsalesPerformance 获取销售业绩
      getsalesPerformance({ searchType: this.date, businessType: 1 }).then((res) => {
      //
        const data = {
          title: '',
          value: BigNumber(res.contractTotal).dividedBy(10000).toFixed(2),
          target: BigNumber(res.targetTotal).dividedBy(10000).toFixed(2)
        }

        this.$refs.saleGaugeChart.initChart(data)
      })
    }
  }
}
</script>
